<title>New Item</title>
<link rel="stylesheet" href="/resources/css/new.css">




<include component="appbar" theme="light"></include>


<div class="page">

	<div class="page-wrapper">
		<div class="page-header d-print-none">
			<div class="container-xl">
				<div class="row g-2 align-items-center">
					<div class="col">
						<h2 class="page-title">
							Manual Entry
						</h2>
					</div>
				</div>
			</div>
		</div>

		<!-- Page body -->
		<div class="page-body">
			<div class="container-xl">
				<div class="row row-cards">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h4 class="card-title">
									Item 1
								</h4>
							</div>

							<div class="card-body">
								<div class="btn-group w-25" role="group">
									<input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-2"
										autocomplete="off" checked>
									<label for="btn-radio-basic-2" type="button" class="btn">Text input</label>
									<input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-1"
										autocomplete="off">
									<label for="btn-radio-basic-1" type="button" class="btn">File upload</label>
								</div>
								<textarea rows="5" class="form-control mt-3" placeholder="Content"></textarea>
							</div>

							<div class="card-body">
								<div class="row g-5 mb-4">
									<div class="col-4">
										<label class="form-label">Owner</label>

										<div class="input-group mb-2">
											<select class="entity-input form-select form-control" placeholder="Name or contact info"></select>
											<button class="btn" type="button">New...</button>
										</div>

										<!-- <select class="entity-input form-select form-control" placeholder="Name or contact info"></select> -->
										<small class="form-hint">Who owns or created this item?</small>
									</div>
								</div>

								<div class="row g-5 mb-4">
									<div class="col-md-5">
										<div>
											<label class="form-label">ID</label>
											<input type="text" class="form-control">
											<small class="form-hint">A unique name or number with which this item has been
												referred to.</small>
										</div>
									</div>
									<div class="col-sm-6 col-md-3">
										<div class="mb-3">
											<label class="form-label">Type of item</label>
											<select name="classification" class="form-control form-select">
												<option></option>
											</select>
										</div>
									</div>
									<div class="col-sm-6 col-md-4">
										<div class="mb-3">
											<label class="form-label mb-3">Flag</label>
											<button class="switch-icon switch-icon-scale"
												data-bs-toggle="switch-icon">
												<span class="switch-icon-a text-secondary">
													<svg xmlns="http://www.w3.org/2000/svg"
														class="icon icon-tabler icon-tabler-star" width="24"
														height="24" viewBox="0 0 24 24" stroke-width="2"
														stroke="currentColor" fill="none" stroke-linecap="round"
														stroke-linejoin="round">
														<path stroke="none" d="M0 0h24v24H0z" fill="none">
														</path>
														<path
															d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
														</path>
													</svg>
												</span>
												<span class="switch-icon-b text-yellow">
													<svg xmlns="http://www.w3.org/2000/svg"
														class="icon icon-tabler icon-tabler-star-filled"
														width="24" height="24" viewBox="0 0 24 24"
														stroke-width="2" stroke="currentColor" fill="none"
														stroke-linecap="round" stroke-linejoin="round">
														<path stroke="none" d="M0 0h24v24H0z" fill="none">
														</path>
														<path
															d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
															stroke-width="0" fill="currentColor"></path>
													</svg>
												</span>
											</button>
											(TODO: more...)
										</div>
									</div>
								</div>
		

								<div class="row g-5 mb-4">
									<div class="col-sm-4 col-md-4">
										<label class="form-label required">Timestamp</label>
										<div id="timestamp"></div>
										<small class="form-hint mt-2">Be as specific as possible, or use a range if a precise date is not known.</small>

									</div>
									<div class="col-sm-4 col-md-4">
										<label class="form-label">Ending timestamp</label>
										<div id="timespan"></div>
										<small class="form-hint mt-2">If the data spans a time period (such as a vocation), fill out its end date here.</small>
									</div>
									<div class="col-sm-4 col-md-4">
										<label class="form-label">Time uncertainty</label>
										<div class="row">
											<div class="col-4">
												<input type="number" class="form-control" min="0">
											</div>
											<div class="col-5">
												<select class="form-control form-select">
													<option></option>
													<option>minutes</option>
													<option>hours</option>
													<option>days</option>
													<option>months</option>
													<option>years</option>
												</select>
											</div>
										</div>
										<small class="form-hint mt-2">Indicate if the time may be off by some amount.</small>
									</div>
								</div>

								<div class="row g-5 mb-4">
									<div class="col-8">
										<div class="ratio ratio-21x9">
											<div id="coordinate-map" class="h-100"></div>
										</div>
									</div>

									<div class="col-sm-3 col-md-3">
										<div class="mb-3">
											<label class="form-label">Latitude</label>
											<input type="text" class="form-control">
										</div>
										<div class="mb-3">
											<label class="form-label">Longitude</label>
											<input type="text" class="form-control">
										</div>
										<div class="mb-3">
											<label class="form-label">Location uncertainty</label>
											<div class="row">
												<div class="col-5">
													<input type="number" class="form-control" min="0">
												</div>
												<div class="col-7">
													<select class="form-control form-select">
														<option></option>
														<option>feet</option>
														<option>meters</option>
														<option>miles</option>
														<option>kilometers</option>
													</select>
												</div>
											</div>
											<small class="form-hint mt-2">Approximate coordinate precision, if known.</small>
										</div>
										<div>
											<label class="form-label">Altitude</label>
											<div class="row">
												<div class="col-6">
													<input type="number" class="form-control">
												</div>
												<div class="col-6">
													<select class="form-control form-select">
														<option></option>
														<option>feet</option>
														<option>meters</option>
													</select>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>


			<include component="footer"></include>
		</div>
	</div>

	<script>
		const leafletMap = L.map('coordinate-map').setView([20, -10], 2);
		// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		// 	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		// }).addTo(leafletMap);

		var layer = protomapsL.leafletLayer({url: 'http://localhost:38233/protomaps-basemap-opensource-20230408.pmtiles'})
		layer.addTo(leafletMap)
	
	</script>

	<script>
		const classes = load('item_classes');
		for (const key in classes) {
			$$('[name=classification]').forEach(el => {
				const opt = document.createElement('option');
				opt.value = key;
				opt.innerText = classes[key].labels[0];
				el.append(opt);
			});
		}

		function hideTimeToggle(dp) {
			$$('.air-datepicker-button', dp.$buttons).forEach(el => {
				if (el.classList.contains('datepicker-time-toggle')) {
					el.classList.add('d-none');
				}
			});
		}

		$('#timestamp').append(newDatePicker({
			passthru: {
				selectedDates: [new Date()],
				onSelect: function(event) {
					$('#timespan .date-input').datepicker.update({
						minDate: Array.isArray(event.date) ? event.date[0] : event.date
					});
				},
				buttons: [
					{
						content(dp) {
							return 'Year-Month'
						},
						onClick(dp) {
							dp.update({
								timepicker: false,
								minView: 'months',
								view: 'months',
								dateFormat: 'MMMM yyyy'
							});
							$$('.air-datepicker-button', dp.$buttons).forEach(el => {
								if (el.classList.contains('datepicker-time-toggle')) {
									el.classList.add('d-none');
								}
							});
						}
					},
					{
						content(dp) {
							return 'Year'
						},
						onClick(dp) {
							dp.update({
								timepicker: false,
								minView: 'years',
								view: 'years',
								dateFormat: 'yyyy'
							});
							$$('.air-datepicker-button', dp.$buttons).forEach(el => {
								if (el.classList.contains('datepicker-time-toggle')) {
									el.classList.add('d-none');
								}
							});
						}
					},
					{
						content(dp) {
							return 'Full date'
						},
						onClick(dp) {
							dp.update({
								minView: 'days',
								view: 'days',
								dateFormat: ''
							});
						}
					}
				]
			},
			sort: false,
			time: true,
			timeToggle: true,
			rangeToggle: true
		}));

		$('#timespan').append(newDatePicker({
			passthru: {
				minDate: new Date()
			},
			sort: false,
			time: true,
			timeToggle: true
		}));

		newEntitySelect('.entity-input', 1);
	</script>